<template>
	<view class="">
		<u-navbar :is-back="true" :custom-back='goBack' title="白名单" back-text=''>
			<view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;">
				<!-- <text style="margin-right: 10px; color: #02AF74;" @click="order">查看订单</text> -->
			</view>
		</u-navbar>
		<view @click="selectWeb" class="item">
			<view class="" style="position: relative;">
				<text>网点名称：</text>
				<u-icon name="arrow-right" style="position: absolute;right: -15.5rem;top: 0.15rem;margin:0 10px;color: #ccc;"></u-icon>
			</view>
			<input v-model="branchName" style="margin-right: 13px;text-align: right;" disabled="true" placeholder="请选择网点" placeholder-style="color:#ccc;"></input>
		</view>
		<view class="item">
			<text>白名单状态：</text>
			<u-switch v-model="checked" active-color="#02AF74" inactive-color="#ccc"></u-switch>
		</view>
		<view class="question">
			<text>名单数量：</text>
			<span class="" style="color: #ccc;">
				<input style="margin-right: 16px;text-align: right;color: #000000;" v-model="number" placeholder="请填写名单数量" placeholder-style="color:#ccc;"></input>
				<u-icon name="question-circle" @click="hint('listNumber')"></u-icon>
			</span>
		</view>
		<view class="question">
			<text>优惠次数：</text>
			<span class="" style="color: #ccc;">
				<input style="margin-right: 15px;text-align: right;color: #000000;" v-model="preferential" placeholder="请填每次优惠时长" placeholder-style="color:#ccc"></input>
				<u-icon name="question-circle" @click="hint('preferentialNumber')"></u-icon>
			</span>
		</view>
		<view class="question">
			<text>优惠时长：</text>
			<span class="" style="color: #ccc;">
				<input style="margin-right: 15px;text-align: right;color: #000000;" v-model="duration" placeholder="请填写每次优惠时长" placeholder-style="color:#ccc"></input>
				<u-icon name="question-circle" @click="hint('preferentialTime')"></u-icon>
			</span>
		</view>
		<view class="item">
			<text>开始时间：</text>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartTimeChange">
							<view class="uni-input" style="margin-right: 13px;color: #ccc;">
								{{startTime}}
							</view>
							<u-icon name="arrow-right" style="color: #ccc;position: absolute;top: 37%;"></u-icon>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<text>结束时间：</text>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndTimeChange">
							<view class="uni-input" style="color: #ccc;margin-right: 13px;">
								{{endTime}}
							</view>
							<u-icon name="arrow-right" style="color: #ccc;position: absolute;top: 37%;"></u-icon>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="button">
			<u-modal v-model="show" :content="content" title="" @confirm="confirmSure" confirm-color="#FF0000"></u-modal>
			<u-button type="success" style="border-radius: 0;" @click="open">
				保存
			</u-button>
		</view>
		
		<u-select v-model="isSelectBranch" mode="mutil-column" value-name="id" label-name="branchName" :list="branchList" @confirm="branchChange"></u-select>
		
	</view>
</template>

<script lang="js">
	// import {
	// 	saveWhiteList,
	// 	updateWhiteList,
	// 	findShopBranchBox
	// } from '../../utils/uniApiJs.js'
	import {
		saveWhiteList,
		updateWhiteList,
		findShopBranchBox
	} from '../../utils/uniApi.ts'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				isSelectBranch: false,//网点选择
				branchName:'',//网点名称
				branchId: '',//网点id
				checked: false,//switch  是否开启状态值
				title: 'picker',
				index: 0,
				date: currentDate,
				startTime:'请选择开始时间',
				endTime:'请选择结束时间',
				show: false,//弹窗
				content: '保存成功',//弹窗提示语
				number: '',//名单数量
				preferential: '',//优惠次数
				duration: '',//优惠时长
				branch: [],//网点列表
				branchList:[],
				whiteDic:{},
				isEdit:false,
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(options) {
			if(options.white){
				this.whiteDic = JSON.parse(options.white)
				this.isEdit = this.whiteDic.isEdit
				this.shopId = this.whiteDic.id
				if(this.whiteDic.item){
					this.branchName = this.whiteDic.item.branchName
					this.branchId = this.whiteDic.item.shopBranchId
					this.checked = this.whiteDic.item.status == 'START' ? true : false
					this.number = this.whiteDic.item.amount
					this.preferential = this.whiteDic.item.freeTime
					this.duration = this.whiteDic.item.freeCount
					this.startTime = this.whiteDic.item.validTimeStart
					this.endTime = this.whiteDic.item.validTimeEnd
				}
			}
		},
		onShow(){
			this.getfindShopBranchBox()
		},
		onHide(){
			uni.hideLoading();
		},
		methods: {
			async addWhiteList() {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					shopBranchId: this.branchId,
					status: this.checked ? 'START' : 'CLOSE',
					amount: this.number,
					freeTime: this.preferential,
					freeCount: this.duration,
					validTimeStart: this.startTime,
					validTimeEnd: this.endTime
				}
				saveWhiteList(params).then((res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.show = true;
						this.content = '新增白名单成功'
					} else {
						this.show = true;
						this.content = res.data.message
					}
				});
			},
			updateWhiteList() {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					id:this.whiteDic.item.id,
					whitelistConfigId:this.whiteDic.item.whitelistConfigId,
					shopBranchId: this.branchId,
					status: this.checked ? 'START' : 'CLOSE',
					amount: this.number,
					freeTime: this.preferential,
					freeCount: this.duration,
					validTimeStart: this.startTime,
					validTimeEnd: this.endTime
				}
				updateWhiteList(params).then((res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.show = true;
						this.content = '编辑白名单成功'
					} else {
						this.show = true;
						this.content = res.data.message
					}
				});
			},
			getfindShopBranchBox() {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					shopId: this.shopId
				}
				findShopBranchBox(params).then((res) => {
					console.log('输出网点信息：'+JSON.stringify(res))
					uni.hideLoading();
					if (res.data.code == 200) {
						this.branchList = []
						this.branch = res.data.data
						this.branchList.push(this.branch)
					} else {
						// uni.showToast({
						// 	title: '数据加载失败',
						// 	icon: 'none',
						// 	duration: 2000                         
						// });
					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			open() {
				if(this.branchId == ''){
					this.showTip('请选择网点')
					return
				}
				// if(!this.checked){
				// 	this.showTip('请开启白名单状态')
				// 	return
				// }
				if(this.number == ''){
					this.showTip('请填写名单数量')
					return
				}
				if(this.preferential == ''){
					this.showTip('请填写优惠次数')
					return
				}
				if(this.duration == ''){
					this.showTip('请填写优惠时长')
					return
				}
				if(this.startTime == ''){
					this.showTip('请选择开始时间')
					return
				}
				if(this.endTime == ''){
					this.showTip('请选择结束时间')
					return
				}
				if(this.isEdit){
					this.updateWhiteList()
				}else{
					this.addWhiteList()
				}
				
			},
			//网点选择
			selectWeb(){
				this.isSelectBranch = !this.isSelectBranch
				if(this.branchList.length<=0){
					this.getfindShopBranchBox()
				}
			},
			//网点选择确认按钮
			branchChange(data) {
				this.isSelectBranch = !this.isSelectBranch
				this.branchName = data[0].label
				this.branchId = data[0].value
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			//开始时间选择确认按钮
			bindStartTimeChange: function(e) {
				this.startTime = e.target.value
			},
			//结束时间选择确认按钮
			bindEndTimeChange: function(e) {
				this.endTime = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//提示语
			hint(name) {
				var title = ''
				if(name == 'listNumber'){
					title = '设置享有名单的人数，网店商家 可邀请加入人数上限'
				} else if(name == 'preferentialNumber'){
					title = '设置名单用户享有每日免费次数'
				} else if(name == 'preferentialTime'){
					title = '设置名单用户享有每次免费时长'
				}
				this.showTip(title)
			},
			showTip(title){
				uni.showToast({
					title: title,
					icon: 'none',
					duration: 1000
				})
			},
			//弹窗的确认事件
			confirmSure(){
				setTimeout(function() {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			},
		}
		// methods: {
		// 	// switch打开或者关闭时触发，值为true或者false
		// 	// 即使不监听此事件，this.checked此时也会相应的变成true或者false
		// 	change(status) {
		// 		// console.log(status);
		// 	},
		// }
	};
</script>

<style lang="scss" scoped>
	.item,
	.question {
		padding: 1em;
		border-bottom: 1px solid #E5E5E5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.u-icon {
			position: absolute;
			right: 10px;
			top: 1.4em;
		}
	}
	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
